<template>
  <div class="head_1 clear">
    <span class="pos">广州<img src="../../../static/icon/bottom_arrow.png" alt="" /></span>
    <input type="text" name="" id="" placeholder="搜索食材、菜品" />
    <span class="home_msg"><img src="../../../static/icon/home_message.png"/></span>
  </div>
</template>

<script>
export default {
  name: 'head_1',
  data () {
    return {
      
    }
  }
}
</script>

<style scoped>
	.head_1{
		padding:0.5rem 5%;
		width: 90%;
		position: fixed;
		z-index: 20;
		background: rgb(72,56,43);
	}
	.clear:after{
		display: block;
		content: '';
		clear: both;
	}
	.pos{
		font-size: 0.9rem;
		color: rgb(241,241,241);
	}
	.pos img{
		vertical-align: middle;
		width: 0.7rem;
		margin-left: 0.3rem;
	}
	.head_1 input{
		background: rgb(64,50,40) url(../../../static/icon/home_search.png) no-repeat 0.2rem ;
		background-size: 10%;
		border: rgb(49,39,31) solid 0.1rem;
		margin-left: 1rem;
		display: inline-block;
		height: 1.4rem;
		width: 60%;
		border-radius: 2rem;
		text-indent: 2rem;
		color: rgb(195,173,136);
	}
	.head_1 input::-webkit-input-placeholder{
		color: rgb(195,173,136);
	}
	.home_msg{
		float:right;
		height: 1.5rem;
	}
	.home_msg img{
		height: 100%;
	}
</style>